<template>
  <div class="fill-width container_con">
    <div class="fill-width cotainer_title">
      应用访问统计
    </div>
    <el-divider class="custom-divider"/>
    <div ref="chart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<script>
import {getAllApplicationVisitStatisticsLast7Days} from "@/api/home";
import * as echarts from 'echarts';

export default {
  name: 'LineChart',
  data() {
    return {
      dataList: [],
      chart: null,
      chartData: {
        categories: [],
        seriesData: [],
      },
    };
  },
  methods: {
    async getDataList() {
      try {
        const res = await getAllApplicationVisitStatisticsLast7Days();
        this.dataList = res.data;
        this.processData();
        this.initChart();
      } catch (error) {
        console.error('获取数据失败:', error);
      }
    },
    processData() {
      let dates = Object.keys(this.dataList).sort();
      const isSmallResolution = window.innerWidth < 768; // 判断是否为小分辨率，可根据实际情况调整阈值

      if (isSmallResolution) {
        dates = dates.slice(-2)
      }

      this.chartData.categories = dates;

      const appTypes = {};
      dates.forEach(date => {
        const apps = this.dataList[date];
        Object.keys(apps).forEach(appName => {
          if (!appTypes[appName]) {
            appTypes[appName] = [];
          }
          appTypes[appName].push(apps[appName].visitCount);
        });
      });

      this.chartData.seriesData = Object.keys(appTypes).map(appName => ({
        name: appName,
        type: 'bar',
        barGap: 0,
        label: this.getLabelOption(),
        emphasis: {
          focus: 'series'
        },
        data: appTypes[appName]
      }));
    },
    getLabelOption() {
      const app = {
        config: {
          rotate: 90,
          align: 'left',
          verticalAlign: 'middle',
          position: 'insideBottom',
          distance: 15
        }
      };
      return {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
          name: {}
        }
      };
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);

      const labelOption = this.getLabelOption();

      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top:  '5%',
          bottom: '5%',
          data: this.chartData.seriesData.map(series => series.name)
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar', 'stack']},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: {show: false},
            data: this.chartData.categories
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: this.chartData.seriesData
      };

      this.chart.setOption(option);
    }
  },
  mounted() {
    this.getDataList();
  }
};
</script>

<style scoped lang="scss">
.custom-divider {
  margin: 0 !important;
}

.container_con {
  background: white;
  margin: 12px 0;
  border-radius: 10px;
}

.cotainer_title {
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
}
</style>
